<template>
  <div class="main flex-v">
    <div class="balanceOuterWrap">
      <div class="balanceTop">
        <!-- <go-back :aa="preurl"></go-back> -->
        <headerBack></headerBack>
        <span
          :class="['banTitle',typer==1?'col1':typer==2?'col2':'col3']"
        >{{typer==1?'平衡策略':typer==2?'院校优先策略':'专业优先策略'}}</span>
        <img class="topBg" :src="typer==1?imgBg1:typer==2?imgBg2:imgBg3" alt />
      </div>
      <universities v-on:btnClick="goesss" v-on:btnMajorClick="gotMajorInfo"></universities>
    </div>
    <div v-transfer-dom>
      <popup v-model="show13" position="bottom" max-height="93%">
        <div style="width: 7.5rem;height: 100vh;">
          <div class="popBoxWrap">
            <scroller>
              <div class="popBox">
                <span class="closeSp" @click="show13=false">
                  <img class="imgIcon" src="~/static/images/volunteer_icon_close.png" alt />
                </span>
                <span class="titlesp">
                  <img
                    class="imgIcon"
                    v-show="fromChildData.stat>0"
                    :src="fromChildData.stat==1?imgcho1:fromChildData.stat==2?imgcho2:fromChildData.stat==3?imgcho3:imgcho4"
                    alt
                  />
                  <b>{{fromChildData.acadNumber}}&nbsp;&nbsp;{{fromChildData.likeName}}</b>
                </span>
                <span class="titledesc">
                  <b>综合评分 {{fromChildData.likeScore}}</b>
                  <b>·</b>
                  <b>2019招生计划 {{fromChildData.likeCount }}</b>
                </span>
                <div id="echart"></div>
                <span class="titleLuqu">{{gotitle}}</span>
                <div class="luquBox">
                  <admission-line :lineData="lineData1" :titleData="titleData1"></admission-line>
                </div>
                <div class="fixedBarBtn" @click="jumpToNext">{{gotitle1}}</div>
              </div>
            </scroller>
          </div>
        </div>
      </popup>
    </div>
  </div>
</template> 

<script>
import echarts from "@/plugins/echarts";
import {
  getAcademyScore,
  getMajorDetails,
  academyServiceDetail
} from "~/api/volunteer";
import headerBack from "~/components/headerBack";
import admissionLine from "~/components/admissionLine";
import universities from "~/components/Universities";
import { TransferDom, Popup } from "vux";
import ls from "store2";
import { setTimeout } from "timers";

export default {
  head: {},
  directives: {
    TransferDom
  },
  components: {
    headerBack,
    universities,
    Popup,
    admissionLine
  },
  data() {
    return {
      imgsOryes: "",
      acdecode: "",
      preurl: "",
      gotitle: "",
      gotitle1: "",
      imgBg1: require("~/static/images/vol4.png"),
      imgBg2: require("~/static/images/vol5.png"),
      imgBg3: require("~/static/images/vol6.png"),
      imgcho1: require("~/static/images/volunteer_icon_chong.png"),
      imgcho2: require("~/static/images/volunteer_icon_chong1.png"),
      imgcho3: require("~/static/images/volunteer_icon_chong2.png"),
      imgcho4: require("~/static/images/volunteer_icon_chong3.png"),
      typer: 0,
      fromChildData: {
        likeName: "",
        likeScore: "",
        likeCount: "",
        stat: 0,
        acadNumber: null
      },
      show13: false,
      titleData1: [],
      lineData1: [],
      majorCode: "", // 传递过来的专业code, 通过‘+’拼接
      userType: ls.get("yxkData").userType
    };
  },
  created() {
    // this.commonJs.gologins();
    this.typer = this.$route.query.type;
  },
  methods: {
    getColDetail(colcode) {
      this.acdecode = colcode;
      this.titleData1 = ["年份", "招生批次", "最低分", "最低位次", "录取人数"];
      getAcademyScore({
        academyCode: colcode,
        userType: this.userType
        // "volume": ls.get('vounms')
      })
        .then(res => {
          if (res.code === "0") {
            let colData = res.data;
            let are = [];
            colData.forEach(item => {
              are.push({
                main: [
                  item.year,
                  item.level,
                  item.minScore,
                  item.minRanking,
                  item.numPlan
                ]
              });
            });
            this.lineData1 = are;
            this.checkColDetail(colcode);
          }
        })
        .catch(error => {
          this.$vux.toast.text(error);
        });
    },
    getMajorDetail(major) {
      this.titleData1 = ["年份", "最低分", "最低位次", "录取人数", "专业线差"];

      getMajorDetails(major)
        .then(res => {
          if (res.code === "0") {
            let colData = res.data;
            let are = [];
            colData.forEach(item => {
              item.minScore === 0
                ? (item.minScore = "--")
                : (item.minScore = item.minScore);
              item.minRanking === 0
                ? (item.minRanking = "--")
                : (item.minRanking = item.minRanking);
              item.numPlan === 0
                ? (item.numPlan = "--")
                : (item.numPlan = item.numPlan);
              item.errand === 0
                ? (item.errand = "--")
                : (item.errand = item.errand);
              are.push({
                main: [
                  item.year,
                  item.minScore,
                  item.minRanking,
                  item.numPlan,
                  item.errand
                ]
              });
            });
            this.lineData1 = are;
          }
        })
        .catch(error => {
          // this.$vux.toast.text(error);
        });
    },
    gotMajorInfo(data, code, line) {
      this.fromChildData.acadNumber = data.majorNumber;
      this.majorCode = data.majorCode;
      this.fromChildData.likeName = data.majName;
      data.totalPoint.toFixed(0) < 0
        ? (this.fromChildData.likeScore = 0)
        : (this.fromChildData.likeScore = data.totalPoint.toFixed(0));
      this.fromChildData.stat = 0;
      this.fromChildData.likeCount = data.enrollmentPlan;
      this.gotitle = "专业录取分数线";
      this.gotitle1 = "查看专业详情";
      let values = [
        data.characterMatchPoint,
        data.majorHitPoint,
        data.majorStrengthPoint,
        data.scoreMatchPoint,
        data.stabilityPoint
      ];
      let maxValue = [
        {
          text: "生涯测评结果",
          max: 5
        },
        {
          text: "专业意向",
          max: 5
        },
        {
          text: "学科实力",
          max: 5
        },
        {
          text: "成绩匹配度",
          max: 5
        },
        {
          text: "录取波动分析",
          max: 5
        }
      ];
      this.show13 = true;
      this.drawPie("#68BD1A", maxValue, values);
      let majorObj = {
        academyCode: code,
        enrollmentMark: line,
        majName: data.majName,
        userType: this.userType,
        volume: ls.get("vounms")
      };
      this.getMajorDetail(majorObj);
    },
    goesss(data) {
      this.fromChildData.likeName = data.acadName;
      this.fromChildData.acadNumber = data.acadNumber;
      this.typer == 1
        ? (this.fromChildData.likeScore = data.totalPoint.toFixed(0))
        : this.typer == 2
        ? (this.fromChildData.likeScore = data.acadFirstTotalPoint.toFixed(0))
        : (this.fromChildData.likeScore = data.majorFirstTotalPoint.toFixed(0));
      this.fromChildData.likeCount = data.enrollmentPlan;
      this.fromChildData.stat = data.academyType;
      this.gotitle = "院校分数线";
      this.gotitle1 = "查看院校详情";
      let values = [
        data.academyStrength,
        data.areaAnalysisPoint,
        data.areaMatchPoint,
        data.majorMatchPoint,
        data.scoreMatchPoint,
        data.stabilityPoint
      ];
      let maxValue = [
        {
          text: "院校实力",
          max: 5
        },
        {
          text: "院校区域影响力",
          max: 5
        },
        {
          text: "报考意愿",
          max: 5
        },
        {
          text: "专业匹配度",
          max: 5
        },
        {
          text: "成绩匹配度",
          max: 5
        },
        {
          text: "录取波动分析",
          max: 5
        }
      ];
      this.show13 = true;
      this.drawPie("#FFC403", maxValue, values);

      this.getColDetail(data.acadCode);
    },
    openEchar() {
      this.show13 = true;
      this.drawPie();
    },
    drawPie(defaultColor, maxValue, values) {
      var charts = echarts.init(document.getElementById("echart"));
      var option = {
        tooltip: {
          trigger: "axis"
        },
        legend: {
          x: "center",
          data: [""]
        },

        toolbox: {
          show: false,
          feature: {
            mark: {
              show: true
            },
            dataView: {
              show: true,
              readOnly: false
            },
            restore: {
              show: false
            },
            saveAsImage: {
              show: false
            }
          }
        },
        calculable: true,
        textStyle: {
          color: "#222", // 文字颜色
          fontWeight: "bold"
        },
        polar: [
          {
            indicator: maxValue,
            splitLine: {
              show: true,
              lineStyle: {
                width: 1,
                color: "#EEEEEE" // 图表背景网格线的颜色
              }
            },
            radius: 60
          }
        ],
        series: [
          {
            name: "",
            type: "radar",
            symbol: "none", // 去掉图表中各个图区域的边框线拐点
            itemStyle: {
              normal: {
                color: "rgba(0,0,0,0)", // 图表中各个图区域的边框线拐点颜色
                lineStyle: {
                  color: defaultColor // 图表中各个图区域的边框线颜色
                },
                areaStyle: {
                  type: "default",
                  color: [defaultColor] // 图表背景网格的颜色
                }
              }
            },
            data: [
              {
                value: values,
                name: ""
              }
            ]
          }
        ]
      };
      charts.setOption(option);
    },
    checkColDetail(codes) {
      this.$vux.loading.show({ text: "正在加载" });
      academyServiceDetail({
        academyCode: codes,
        fromUser: ls.get("yxkData").userId
      })
        .then(res => {
          if (res.code === "0") {
            this.imgsOryes = res.data.image;
          }
          this.$vux.loading.hide();
        })
        .catch(error => {
          this.$vux.loading.hide();
        });
    },
    jumpToNext() {
      const codeList = this.majorCode.split("+");

      if (this.gotitle1 == "查看院校详情") {
        let applsData = {
          academyCode: this.acdecode,
          userId: ls.get("yxkData").userId
        };
        ls.set("applsData", applsData);
        ls.set("preUrl", "../volunteer/balance");

        setTimeout(() => {
          if (this.imgsOryes == "" || this.imgsOryes == undefined) {
            this.commonJs.gopush("../yxk/univDetail", this.$route.query.type);
          } else {
            this.commonJs.gopush("../yxk/univImgDetail", this.$route.query.type);
          }
        }, 50);

        // this.goto('../university/univDetail');
        // 跳转到院校库
      } else if (this.gotitle1 == "查看专业详情") {
        if (codeList.length == 1) {
          const sendObj = {
            code: codeList[0],
            typeId: this.$route.query.type
          };
          ls.set("preUrl", "../volunteer/balance");
          this.commonJs.gopush("/professional/detail", JSON.stringify(sendObj));
        } else if (codeList.length > 1) {
          const sendObj = {
            list: codeList,
            typeId: this.$route.query.type
          };
          sessionStorage.setItem("majorParam", JSON.stringify(sendObj));
          ls.set("preUrl", "../volunteer/balance");
          this.commonJs.gopush("/professional/list");
        }
      }
    }
  },

  mounted: function() {
    this.preurl = this.$store.state.presUrl;
    this.$vux.loading.hide();
  }
};
</script>

<style scoped lang="less">
/deep/h4 {
  font-size: 0.4rem !important;
}

/deep/.vux-popup-dialog {
  background: none;
}

.popBoxWrap {
  width: 7.5rem;
  min-height: 100vh;
  background: rgba(255, 255, 255, 1);
  border-radius: 0.3rem 0.3rem 0px 0px;

  .popBox {
    width: 100%;
    height: auto;
    min-height: 100vh;
    overflow: hidden;
    padding: 0 0.3rem;
    box-sizing: border-box;

    .closeSp {
      display: block;
      width: 0.4rem;
      height: 0.4rem;
      margin-left: 6.4rem;
      margin-top: 0.3rem;
      font-size: 0.3rem;

      .imgIcon {
        width: 0.4rem;
        height: 0.4rem;
      }
    }

    .titlesp {
      display: block;
      // height: 0.56rem;
      min-height: 0.4rem;
      height: auto;
      // height: 0.4rem;
      font-size: 0.3rem;
      overflow: hidden;
      padding-right: 0.3rem;
      box-sizing: border-box;
      display: flex;
      align-items: center;

      .imgIcon {
        width: 0.6rem;
        height: 0.6rem;
        display: inline-block;

        vertical-align: middle;
      }

      b {
        line-height: 0.4rem;
        font-size: 0.3rem;
        font-weight: bold;
        color: rgba(34, 34, 34, 1);
        height: auto;
      }
    }

    .titledesc {
      display: block;
      height: 0.4rem;
      font-size: 0.3rem;
      margin-top: 0.1rem;

      b {
        font-size: 0.26rem;
        font-weight: bold;
        color: rgba(153, 153, 153, 1);
        line-height: 0.37rem;
        margin-right: 0.1rem;
      }
    }

    #echart {
      width: 6.9rem;
      height: 5rem;
      margin: 0 auto;
      // transform: rotate(-90deg);
    }

    .luquBox {
      width: 100%;
      height: auto;
    }

    .titleLuqu {
      display: block;
      height: 0.42rem;
      font-size: 0.3rem;
      font-weight: bold;
      color: rgba(34, 34, 34, 1);
      line-height: 0.42rem;
      margin-bottom: 0.15rem;
    }

    .fixedBarBtn {
      width: 6.3rem;
      height: 0.8rem;
      background: rgba(255, 255, 255, 1);
      border-radius: 0.1rem;
      border: 1px solid rgba(104, 189, 26, 1);
      font-size: 0.3rem;
      font-weight: bold;
      color: rgba(108, 191, 32, 1);
      line-height: 0.8rem;
      text-align: center;
      margin: 0 auto;
      z-index: 2;
      // position: fixed;
      // bottom: 0.2rem;
      // left: 0.6rem;
    }
  }
}

.zhuantiBox {
  height: auto;
}

.balanceOuterWrap {
  width: 100%;
  min-height: 100vh;

  .balanceTop {
    z-index: 2;
    width: 100%;
    height: 2.6rem;
    // background: #fff;
    position: relative;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 0.2rem 0px rgba(204, 204, 204, 0.3);
    border-bottom-left-radius: 0.2rem;
    border-bottom-right-radius: 0.2rem;
    // background: url('~/static/images/volunteer_pic_profession_bg.png') no-repeat;
    background-size: cover;

    .topBg {
      position: absolute;
      right: 0;
      bottom: 0;
      width: 3.67rem;
      height: 2.06rem;
    }

    .banTitle {
      display: block;
      height: 0.62rem;
      font-size: 0.44rem;
      font-weight: bold;

      line-height: 0.62rem;
      margin-left: 0.5rem;
      margin-top: 0.3rem;
    }

    .col1 {
      color: rgba(148, 210, 103, 1);
    }

    .col2 {
      color: #fec03e;
    }

    .col3 {
      color: #5ab2f1;
    }
  }

  .balanceWrap {
    width: 7.5rem;
    min-height: 100vh;
    background: #fff;

    .balanceBox {
      width: 100%;
      height: auto;
      padding: 0.3rem 0rem;
      box-sizing: border-box;

      .blBar1 {
        width: 100%;
        height: 0.8rem;
        background: rgba(250, 250, 250, 1);
        border-radius: 0.1rem;
        padding: 0 0.2rem;
        box-sizing: border-box;

        .sp1 {
          height: 0.8rem;

          i,
          b,
          em {
            display: inline-block;
            vertical-align: middle;
          }

          i {
            width: 0.18rem;
            height: 0.25rem;
            background: rgba(241, 116, 103, 1);
            border-radius: 0.09rem;
          }

          b {
            font-size: 0.34rem;
            font-weight: bold;
            color: rgba(34, 34, 34, 1);
            line-height: 0.8rem;
            margin-left: 0.25rem;
          }

          em {
            line-height: 0.8rem;
            margin-left: 0.2rem;
            font-size: 0.3rem;
            font-weight: bold;
            color: rgba(187, 187, 187, 1);
          }
        }

        .imgIcon {
          width: 0.4rem;
          height: 0.4rem;
        }
      }
    }
  }
}
</style>
